<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>充值记录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta name="msapplication-tap-highlinght" content="no" />
</head>
<style type="text/css">
	html, body, div, span, applet, object, iframe,	h1, h2, h3, h4, h5, h6, p, blockquote, pre,	a, abbr, acronym, address, big, cite, code,	del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	    margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;font-family: arial,微软雅黑;vertical-align: baseline;list-style: none;-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	input, select, textarea {
	    font-size: 100%; outline: none; border: none; background: none;
	}
	html{background:url(/static/images/bg.jpg) no-repeat center top,url(/static/images/bg_01.jpg);background-size:100%; height: 100%;}
	.record_logo{width:32.44vw;margin:3.29vw auto 0;}
	.record_logo img{width: 100%;}
	.record_list{width: 100%;position: relative;top: -8.78vw;left: 0;}
	.record_list img{width: 100%;}
	.data_form{color: rgb(255,255,255);margin-top: -10.75vw;}
	.data_form ul{position:relative; max-height:116vw;min-height: 116vw; overflow:auto;}
	.data_form li,div.hj{display: block; font-size: 3.2vw;font-family: "微软雅黑";text-align: center;margin-bottom: 4.89vw;height: 6.47vw;}
	.data_form li p{float: left;}
	p.sj{margin-left: 6.13vw;}
	p.je{margin: 1.51vw 0 0 11.2vw;}
	p.zs{margin-left: 18.13vw;margin-top: 1.51vw;}
	p.fs{margin-left: 16.89vw;margin-top: 1.33vw;}
	div.hj{margin-top: 2.4vw;height: 3.2vw;}
	div.hj p{float: left;}
	p.hj_p{margin-left: 11.11vw;}
	p.je_p{margin-left: 15.11vw;}
	p.zs_p{margin-left: 16.27vw;}
	p.fs_p{margin-left: 18.21vw;}
	.down_btn{width: 6.04vw;position: absolute;left: 47.62vw;bottom: 35.63vw;}
	.down_btn img{width: 100%;}
	.return_btn{width: 31.56vw;margin:auto;position: relative;top: -3.25vw; }
	.return_btn img{width: 100%;}
	/* iphone4 */
	@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
		.data_form ul{max-height: 90vw;min-height: 90vw;}
		div.hj{margin-top: 2.4vw;}
		.return_btn{top: -2vw; }
		p.je{margin-left: 9.2vw;}
		p.zs{margin-left: 15.13vw;}
		p.fs{margin-left: 14.89vw;}
		p.zs_p{margin-left: 12.84vw;}
		p.fs_p{margin-left: 16.91vw;}
		.down_btn{bottom: 32.63vw;}
	}
	/*iphone5*/
	@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
		p.je{margin-left: 9.2vw;}
		p.zs{margin-left: 15.13vw;}
		p.fs{margin-left: 14.89vw;}
		p.zs_p{margin-left: 12.84vw;}
		p.fs_p{margin-left: 16.91vw;}
		.return_btn{top: -2.17vw; }
	}
	/*ipad Pro*/
	@media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2){
		.down_btn{bottom: 22.63vw; }
		.data_form li,div.hj{font-size: 2.5vw;margin-bottom: 1.89vw;}
		.return_btn{top: 0.75vw;width: 26.56vw;}
		.data_form ul{max-height: 86vw;min-height: 86vw;}
		p.sj{margin-left: 6.13vw;}
		p.je {margin-left:16.2vw;}
		p.je_p {margin-left: 19.61vw;}
		p.hj_p {margin-left: 10.11vw;}

	}
	/*ipad*/
	@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2){
		.down_btn{bottom: 22.63vw; }
		.data_form li,div.hj{font-size: 2.5vw;margin-bottom: 1.89vw;}
		.return_btn{top: 0.75vw;width: 26.56vw;}
		.data_form ul{max-height: 86vw;min-height: 86vw;}
		p.sj{margin-left: 6.13vw;}
		p.je {margin-left:16.2vw;}
		p.je_p {margin-left: 19.61vw;}
		p.hj_p {margin-left: 10.11vw;}
	}	
	/*Nexus 5s*/
	@media screen and (device-width: 412px) and (device-height: 732px) {
		div.hj{margin-top: -1.6vw;}
		.data_form li{margin-bottom: 4.29vw}
	}
</style>
<body>
	<div class="wrap">
		<div class="record_logo">
			<img src="/static/images/record_logo.png" alt="">
		</div>
		<div class="record_list">
			<img src="/static/images/record_list.png" alt="">
		</div>
		<div class="data_form" >
			<ul>
				{foreach name="list" id="vo"}
				<li>
					<p class="sj">{$vo['paytime1']}<br>{$vo['paytime2']}</p>
					<p class="je">{$vo['money']}</p>
					<p class="zs">{$vo['diamond']}</p>
					<p class="fs">{if $type==0}线上{elseif $type==1}线下{/if}</p>
				</li>
				{/foreach}
			</ul>

			<div class="hj">
				<p class="hj_p">合计</p>
				<p class="je_p">{$money}</p>
				<p class="zs_p">{$diamond}</p>
				<p class="fs_p">-</p>
			</div>
		</div>
		<div class="return_btn">
			<a href="{$url}"><img src="/static/images/return.png" alt=""></a>
		</div>
	</div>
</body>
<script src="/static/js/jquery190.js"></script>
<script>
	var w=window.innerWidth;
	var h=window.innerHeight;
	var L=$(".data_form ul li").length;
	window.onload=function(){
		if (w==320&h==480) {
			iphone4();
		}else{
			other();
		}
	}
	function iphone4(){
		if (L>8) {
			$('.down_btn').css('display','block')
		}else{
			$('.down_btn').css('display','none')
		}
	}
	function other(){
		if (L>10) {
			$('.down_btn').css('display','block')
		}else{
			$('.down_btn').css('display','none')
		}
	}
</script>
</html>